<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>领券中心</title>
    <!--    新品-专题-优惠券-->
    <link rel="stylesheet" href="assets/css/new-subject-coupon.css"/>
    <link rel="shortcut icon" href="assets/images/Shop.ico">
    <link rel="stylesheet" th:href="@{assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <link rel="stylesheet" th:href="@{assets/css/bootstrap.css}">
    <script crossorigin="anonymous"
            integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
            src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" th:href="@{assets/css/bootstrap.css}">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <script src="assets/js/bootstrap.js"></script>
</head>
<style>

    li:hover {
        cursor: pointer;
    }

    #uls > li {
        background-color: #cdcaca;
        padding: 5px 10px;
        border-radius: 10px;
        display: initial;
        margin: 50px 50px;
        color: white;
    }

    #leftRoundCorner {
        background: radial-gradient(18px at top, transparent 50%, rgb(250, 16, 59) 50%);
    }

    #rightRoundCorner {
        background: radial-gradient(18px at bottom, transparent 50%, rgb(250, 16, 59) 50%)
    }

    #coupon-box > div {
        float: left;
        height: 100%;
    }

    #coupon-box > div > div {
        position: relative;
        width: 20px;
        height: 50%;
        float: right;

    }

    #yhq span {
        height: 25px;
        display: inline-block;
        float: left;
        margin: 0;
        padding: 0;
        color: white;
    }

    #bos :hover {
        cursor: pointer;
        font-weight: bold;
    }

    #bos {
        border-radius: 0px 5px 5px 0px;
        width: 50px;
        height: 100px;
        background-color: rgb(250, 16, 59);
        align-content: center;
    }

    #yhq {
        padding-left: 10px;
        width: 25px;
        height: 100px;
        margin: 0px 22px;
        text-align: center;
        line-height: 28px
    }

    #left-box {
        border-radius: 5px 0px 0px 5px;
        width: 200px;
        height: 100px;
        background-color: rgb(250, 16, 59);
    }

</style>

<body style="background-color: rgb(242,242,242)">
<!--//导航栏-->
<div th:replace="header::headerS"></div>

<div id="cc" class="container" style="margin-top: 100px;">

    <h1 style="text-align: center;margin-bottom: 30px">优惠券</h1>
<!--    分类头-->
    <ul id="uls" class="text-center" style="width: 100%;height: 20px;list-style: none;margin-bottom: 30px">
        <li  th:each="c : ${classify}"
             th:id="${#strings.substring(c,0,1)}"
             th:text="${#strings.substring(c,2)}"
             onclick="classifys(this)"
            th:style="${cStat.index==0?' background-color: rgb(234,82,103);':''}"></li>
    </ul>

    <!--                    优惠券-->
    <div th:each="c:${couponList}" id="coupon-box" style=" position:relative;width: 300px;height: 100px;margin: 20px 20px;float: left">

        <div id="left-box">

            <div style="width: 180px ;height: 80px;margin: 10px 5px 10px 10px">
            <span style="display: inline-block;color: red;position: absolute;top: 7px;left: 0px">
                                <span style="color:white; font-size: 12px">￥</span><span
                    style="color:white; display: inline-block; font-size: 20px;font-weight: bold"
                    th:text="${c.amount}"></span>
                            </span><br>
                <span style=" color:white; font-size: 12px;position: absolute; top: 40px;left: 0px;"
                      th:text="'满'+${c.minPoint}+'元可用'"></span><br>
                <span style="color:white;font-size: 16px;overflow: hidden;position: absolute; top: 63px;left: 0"
                      th:text="${c.name}"></span><br>

            </div>

        </div>
        <div style=" width: 20px;height: 100px;position: relative">
            <div id="leftRoundCorner"></div>
            <div id="rightRoundCorner"></div>
        </div>

            <div id="bos">
                <div id="yhq">
                    <span>立</span>
                    <span>即</span>
                    <span>领</span>
                    <span>取</span>
                </div>
            </div>

        <div style="position: absolute;top:10px;left: 209px;height:80px;width:0px;border:1px white dashed"></div>
    </div>

</div>

<script>
    function classifys(e) {

        let obj=e.id;

        $("#uls>li").each(function (i,j) {
            $(j).css("background-color","#cdcaca");
        })
        $(e).css("background-color","rgb(234,82,103)");

        $.ajax({
            url:"selectCoupon",
            data:{
                "id": obj
            },
            type:'get',
            success:function (result) {
                var html = "";
                for (let i = 0; i < result.length; i++) {
                    html+="<div id=\"coupon-box\" style=\" position:relative;width: 300px;height: 100px;margin: 20px 20px;float: left\">"+
                        "\n" +
                        "        <div id=\"left-box\">\n" +
                        "\n" +
                        "            <div style=\"width: 180px ;height: 80px;margin: 10px 5px 10px 10px\">\n" +
                        "            <span style=\"display: inline-block;color: red;position: absolute;top: 7px;left: 0px\">\n" +
                        "                                <span style=\"color:white; font-size: 12px\">￥</span><span\n" +
                        "                    style=\"color:white; display: inline-block; font-size: 20px;font-weight: bold\"\n" +
                        "                    >"+result[i].amount+"</span>\n" +
                        "                            </span><br>\n" +
                        "                <span style=\" color:white; font-size: 12px;position: absolute; top: 40px;left: 0px;\"\n" +
                        "                    >"+"满"+result[i].minPoint+"元可用"+"</span><br>\n" +
                        "                <span style=\"color:white;font-size: 16px;overflow: hidden;position: absolute; top: 63px;left: 0\"\n" +
                        "                      >"+result[i].name+"</span><br>\n" +
                        "\n" +
                        "            </div>\n" +
                        "\n" +
                        "        </div>\n" +
                        "        <div style=\" width: 20px;height: 100px;position: relative\">\n" +
                        "            <div id=\"leftRoundCorner\"></div>\n" +
                        "            <div id=\"rightRoundCorner\"></div>\n" +
                        "        </div>\n" +
                        "\n" +
                        "            <div id=\"bos\">\n" +
                        "                <div id=\"yhq\">\n" +
                        "                    <span>立</span>\n" +
                        "                    <span>即</span>\n" +
                        "                    <span>领</span>\n" +
                        "                    <span>取</span>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "\n" +
                        "        <div style=\"position: absolute;top:10px;left: 209px;height:80px;width:0px;border:1px white dashed\"></div>\n"+
                            "</div>"
                }

                $(".container").children("#coupon-box").remove();
                $("#cc").append(html);

            }
        })


    }


</script>

</body>
</html>